<template>
  <div class="contribute-detail">
  
  <div class="handlePass" v-if="route.query.type == 'edit'">
    <a-button class="addButton" @click="checkPass">审核通过</a-button>
    <a-button class="addButton" @click="unCheckPass">审核不通过</a-button>
  </div>
 
    <div class="content-container" :style="route.query.type == 'onlyRead' ? 'height: 100%' : ''">
      <a-form
      name="advanced_search"
      autoComplete="off"
      class="menu-form"
      :model="formState"
      ref="menuAddFrom"
    >
    <a-form-item
        class="menus-item"
        :name="['contributeColumn', 'value']"
        :label="formState.contributeColumn.label"
        :rules="[formState.contributeColumn.rule]"
      >
        <div class="pcSelect">
          <a-tree-select
            placeholder="请选择栏目"
            v-model:value="formState.contributeColumn.value"
            ref="usermanage_treeSelect"
            show-search
            :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
            allow-clear
            treeNodeFilterProp="channelName"
            :fieldNames="{
              children: 'children',
              label: 'channelName',
              value: 'id',
            }"
            tree-default-expand-all
            :tree-data="channelTree"
            @change="changeType"
          >
          </a-tree-select>

        </div>
      </a-form-item>
      <a-form-item
        :name="['author', 'value']"
        :label="formState.author.label"
        :rules="[formState.author.rule]"
      >
        <a-input
          v-model:value="formState.author.value"
          disabled="true"
        />
      </a-form-item>
      <a-form-item
        :name="['title', 'value']"
        :label="formState.title.label"
        :rules="[formState.title.rule]"
      >
        <a-input
          v-model:value="formState.title.value"
          :placeholder="formState.title.placeholder"
          allow-clear
        />
      </a-form-item>
      <a-form-item
        :name="['digest', 'value']"
        :label="formState.digest.label"
        :rules="[formState.digest.rule]"
      >
        <a-textarea
          v-model:value="formState.digest.value"
          :placeholder="formState.digest.placeholder"
          show-count
          :maxlength="100"
          allow-clear
          :rows="5"
        />
      </a-form-item>
      <!-- 富文本编辑器 -->
      <a-form-item label="正文">
        <div class="editor">
        <!-- <span class="text-part"></span> -->
          <UEditor ref="editor" v-model="formState.contents.value"
              :options="{ initialFrameHeight: initialFrameHeight, initialFrameWidth: initialFrameWidth }"></UEditor>
        </div>
      </a-form-item>
      
    </a-form>
    <div class="onlyReadMask" v-if="route.query.type == 'onlyRead'"></div>
    </div>
    <!-- 审核模态框 -->
    <base-modal
      :width="modAlProps.width"
      :isVisible="isVisible"
      :title="modAlProps.title"
      :buttons="buttons"
      :cancleText="cancleText"
      @handleOk="buttonMessage"
      @handleCancle="cancel"
      class="usermanage_modal"
    >
      <template v-slot:body>
      <div v-if="modAlProps.title == '审核通过'" class="checkPass">
        审核通过是否立即发布？
      </div>
        <a-form
        v-if="modAlProps.title == '审核不通过'"
          autoComplete="off"
          :model="formState"
          ref="auditFailedRef"
        >
          <a-form-item
            :label="formState.unPassCause.label"
            :name="['unPassCause', 'value']"
            :rules="[formState.unPassCause.rule]"
            class="unPassCause"
          >
            <a-textarea
            style="width: 470px"
              v-model:value="formState.unPassCause.value"
              placeholder="请输入"
              :rows="4"
              allow-clear
              show-count
              :maxlength="50"
            />
          </a-form-item>
        </a-form>
      </template>
    </base-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { Modal, message, TreeSelectProps } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import request from "@/api/index";
import baseModal from "@/components/modal/baseModal.vue";
import UEditor from "@/components/editor/UEditor.vue";
import { modeProp } from "@/type.d";


interface dataSourceType {
  [propName: string]: any;
}

//data
let modAlProps: modeProp = reactive({
  width: "M",
  title: "审核通过",
});
let initialFrameHeight = 500
let initialFrameWidth = '100%'
const isVisible = ref<boolean>(false);
const route: any = useRoute();
const router: any = useRouter();
const menuAddFrom = ref<any>("menuAddFrom");
const channelTree = ref<TreeSelectProps["treeData"]>([]);
const isPublish = ref<boolean>(false);
const buttons = ref<dataSourceType[]>([
  {
    text: "确定",
    "html-type": "submit",
    keepAlive: true,
  },
]);
const cancleText = ref<string>('取消');
const auditFailedRef = ref<any>(null);

const formState = reactive<dataSourceType>({
  contributeColumn: {
    value: null,
    rule: {
      required: true,
      trigger: ["blur"],
      message: "投稿栏目不能为空！",
    },
    label: "投稿栏目",
  },
  author: {
    value: "",
    placeholder: "请输入作者名称",
    rule: {
      required: false,
    },
    label: "作者",
  },
  title: {
    value: "",
    placeholder: "请输入标题",
    rule: {
      required: true,
      trigger: ["change", "blur"],
      message: "标题不能为空！",
    },
    label: "标题",
  },
  digest: {
    value: "",
    placeholder: "请输入摘要",
    rule: {
      required: false,
      trigger: ["blur"],
      message: "摘要不能为空！",
    },
    label: "摘要",
  },
  contents: {
    value: "",
    label: "正文",
  },
  unPassCause: {
    value: "",
    placeholder: "请输入",
    rule: {
      required: true,
      trigger: ["blur"],
      message: "请填写审核不通过原因！",
    },
    label: "审核不通过原因：",
  },
  id: "",
});
//method
const changeType = (e: string, options: any) => {
  formState.contributeColumn.value = e;
};
// 详情
const getDetail = async () => {
    const data = await request.getReviewedDetail({ id: route.query.id });
    formState.id = data.id,
    formState.contributeColumn.value = data.channelId;
    formState.author.value = data.userName;
    formState.title.value = data.title;
    formState.digest.value = data.summary;
    formState.contents.value = data.content;
};
// 获取栏目树
const getChannelTree = async() => {
  const data = await request.fetchChannelChannelTree()
  channelTree.value = data || [];
};
const checkPass = () => {
  menuAddFrom.value.validate().then(() => {
    modAlProps.title = '审核通过';
    cancleText.value = '否';
    buttons.value[0].text = '是';
    isVisible.value = true;
  });
};
const unCheckPass = () => {
  menuAddFrom.value.validate().then(() => {
    modAlProps.title = '审核不通过';
    cancleText.value = '取消';
    buttons.value[0].text = '确定';
    isVisible.value = true
  });
};
const buttonMessage = () => {
  auditFailedRef.value.validate().then(() => {
      isPublish.value = true;
      modAlProps.title == '审核通过' ? auditPass() : auditFailed()
  })
  
  
};
const auditPass = () => {
  const params = {
    channelId: formState.contributeColumn.value,
    content: formState.contents.value,
    id: formState.id,
    summary: formState.digest.value,
    title: formState.title.value,
    isPublish: isPublish.value,
  }
  request.auditPass(params).then((res: any) => {
    if(res.code == "00000 00000") {
      message.success(res.message)
      isVisible.value = false
      router.back();
    }
  }).catch((err: any) => {
    throw new Error(err)
  })
};
const auditFailed = () => {
  const params = {
    id: formState.id,
    reason: formState.unPassCause.value,
  }
  request.auditFailed(params).then((res: any) => {
    if(res.code == "00000 00000") {
      message.success(res.message)
      isVisible.value = false
      router.back();
    }
  }).catch((err: any) => {
    throw new Error(err)
  })
};
//取消返回
const cancel = (e: any) => {
  if(modAlProps.title == '审核通过') {
    if(!e) {
      isPublish.value = false;
      auditPass();
    }else {
      isVisible.value = false;
    }
  } else {
    isVisible.value = false;
  }
};

onMounted(() => {
  getDetail();
  getChannelTree();
  // useFixeWidth();
});
</script>

<style lang="less" scoped>
.contribute-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  // padding: 48px 24px 16px;
  // background: #ffffff;
  height: calc(100% - 72px);
  overflow-y: auto;
  .handlePass {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    height: 80px;
    background-color: #fff;
    .addButton {
      margin-right: 8px;
    }
  }
  .content-container {
    position: relative;
    padding: 20px;
    width: 100%;
    height: calc(100% - 102px);
    background-color: #fff;
    overflow-y: auto;
    .onlyReadMask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: transparent;
        height: 1000px;
        overflow-y: auto;
        z-index: 999;
      }
  }
}
.checkPass {
  text-align: center;
  font-size: 16px;
  text-shadow: 0 0 .25px currentcolor;
}
.unPassCause {
  .ant-input-textarea-show-count::after {
    right: -93px;
  }
}
.editor {
  width: 805px;
  .text-part {
    margin-left: 5px;
    color: #000000d9;
    text-shadow: 0 0 .25px currentcolor;
  }
}
.pcSelect {
  display: flex;
  align-items: center;
  .editor {
    width: 30px;
    position: absolute;
    left: 375px;
  }
}
.saveBtn {
  position: fixed;
  bottom: 0;
  height: 48px;
  background-color: #fff;
  box-shadow: 0px -12px 48px 16px rgba(0, 0, 0, 0.03),
    0px -9px 28px 0px rgba(0, 0, 0, 0.05),
    0px -6px 16px -8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.closeAll {
  margin-top: 16px;
  width: 120px;
}

.header-content {
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8e8;
  margin-bottom: 16px;
  padding: 16px;

  .searchContent {
    margin-top: 16px;
  }
}

.selctapi-list {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.baseTable {
  position: relative;
}

.baseTable .aTable {
  max-height: 450px;
  height: fit-content;
  overflow: auto;
}
::v-deep(.ant-form) {
  display: flex;
  flex-direction: column;
  // align-items: center;
  width: 100%;
  height: auto;
}
::v-deep(.ant-form-item) {
  width: 604px;
  display: flex;

  .ant-form-item-control {
    width: 60%;
    margin-left: 4px;
    flex: unset;
  }

  .ant-form-item-label {
    flex-grow: 0;
    width: 117px;
    text-align: right;
  }
}
</style>
